<template>
    <el-card shadow="always" >
        <div class="addMain">
            <el-form :model="personAdd" :rules="rules" label-suffix=":" label-position="left" ref="ruleForm" label-width="100px" :show-message="true" class="demo-ruleForm">
                <el-form-item label="客户姓名" prop="name" size="small">
                    <el-input type="text" v-model.trim="personAdd.name" :clearable="personAdd.name ? true: false" >
                        <template slot="append">
                            <!-- <el-button slot="append" size="small">读证</el-button> -->
                            <span>读证</span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="证件号码" prop="IdCard" size="small">
                    
                    <el-input type="text" v-model.trim="personAdd.IdCard" :clearable="personAdd.IdCard ? true: false" ></el-input>
                </el-form-item>
                <el-form-item label="证件号码" prop="phone" size="small">
                    <el-input type="text" v-model.trim="personAdd.phone" :clearable="personAdd.phone ? true: false" ></el-input>
                </el-form-item>
                <el-form-item label="客户照片" prop="phone" size="small">
                    <el-input type="text" v-model.trim="personAdd.phone" :clearable="personAdd.phone ? true: false" ></el-input>
                </el-form-item>
                <el-form-item label="现住地址" prop="presentAddress" size="small">
                    <el-input type="text" v-model.trim="personAdd.presentAddress" :clearable="personAdd.presentAddress ? true: false" ></el-input>
                </el-form-item>
                <el-form-item label="客户类型" prop="clientType" size="small">
                    <el-select size="small" v-model.trim="personAdd.clientType" :clearable="personAdd.clientType ? true: false" filterable placeholder="请选择" auto-complete="off">
                    <el-option
                    v-for="item in personAdd.selectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="业务员" prop="salesman" size="small">
                    <el-select size="small" v-model.trim="personAdd.salesman" :clearable="personAdd.salesman ? true: false" filterable placeholder="请选择" auto-complete="off">
                    <el-option
                    v-for="item in personAdd.selectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="submitForm('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>    
</template>
<script>
import validateFun from "@/common/verificationForm.js";   //验证方法
export default {
  name: "personAdd",
  data() {
    return {
      personAdd: {
        name: null,
        IdCard: null,
        phone: null,
        presentAddress: null,
        selectOptions: [
          {
            value: "1",
            label: "售车客户"
          },
          {
            value: "2",
            label: "购车客户"
          }
        ],
        clientType: "",
        salesman: "" //显示的是label值  使用的是value值
      },
      rules: {
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        IdCard: [{ required: true, message: "不能为空", trigger: "blur" }],
        phone: [
          { required: true, message: "不能为空", trigger: "blur" },
          { validator: validateFun.validatorPhone, trigger: "blur" } //正则方法验证格式
        ],
        clientType: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        salesman: [{ required: true, message: "不能为空", trigger: "change" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        console.log(valid);
        if (valid) {
          alert("submit!");
          console.log(this.ruleForm.value8);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-card {
  width: 100%;
  .addMain {
    width: 40%;
    margin: 0 auto;
    .el-form {
      .el-form-item--small.el-form-item {
        margin-bottom: 30px;
      }
    }
    .imgMain {
      text-align: center;
      .imgBtn {
        color: #3399ff;
        cursor: pointer;
      }
    }
    .imgBox {
      width: 150px;
      height: 150px;
      background-color: red;
      margin-left: 48px;
    }
  }
}
</style>

